<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>关门式的图文组合悬停特效</title>
    <link rel="stylesheet" href="index.css" />

    <link rel="icon" type="image/x-icon" href="../../../favicon.ico" />
</head>

  <body>
    <div class="container">
      <div class="item">
        <div class="img"><img src="../../images/views/1.jpg" alt="" /></div>
        <div class="caption">
          <h3>松</h3>
          <p>
            要说松树，要比大它比不过榕树，要比美它比不过柳树。但是，秋天，花谢了，草枯了，许多树的叶子都落尽了，松树却在秋风秋雨中舒展它的枝叶。
          </p>
        </div>
      </div>
      <div class="item">
        <div class="img"><img src="../../images/views/2.jpg" alt="" /></div>
        <div class="caption">
          <h3>竹</h3>
          <p>
            竹有阳刚之气，又具阴柔之美。三千年华夏国粹，竹君始终是东方人追求的境界，但同时又与东方文化紧密相联。
          </p>
        </div>
      </div>
      <div class="item">
        <div class="img"><img src="../../images/views/3.jpg" alt="" /></div>
        <div class="caption">
          <h3>梅</h3>
          <p>
            驿外断桥边，寂寞开无主。已是黄昏独自愁，更着风和雨。无意苦争春，一任群芳妒。零落成泥碾作尘，只有香如故。
          </p>
        </div>
      </div>
    </div>
  </body>
</html>
